Cloudinary の変換とキャッシュの仕組みを理解しよう

画像・動画最適化SaaSであるCloudinaryにおいて、変換画像/動画の生成とそのあとのキャッシュや配信の動きについて解説します。

#Cloudinary

#SaaS

#デザイン

#画像処理

Ito ma

2023.12.11

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Cloudinaryとは画像や動画、他あらゆるアセットを保管・一元管理でき、変換や最適化を即座に行え、CDNで高速配信できるサービスです。

この変換や最適化には、URL内で直接変換パラメータを指定しますが、このときのCloudinary内での生成とそのあとのキャッシュや配信の動きについて今回のブログで解説します。

＊本文内では「画像」と書いていますが、動画や他のアセットでも基本的に同様と考えてください。

変換生成とキャッシュの仕組み

まずは Cloudinary での基本的な変換の生成とキャッシュの仕組みを理解しましょう。

1回目のアクセス

Cloudinary では、ある変換画像への一番最初のリクエストがきた際に、

Cloudinaryに保管してあるオリジナル画像から変換処理を行い、
生成した画像 (derived images / 派生画像) をCloudinary内のクラウドストレージに追加、
CDNを経由してCDNキャッシュが生成され、

そしてユーザに変換画像が配信されます。

2回目以降のアクセス

同じ画像URLへのリクエストが再びきた場合、

ブラウザキャッシュ（同じユーザ端末/ブラウザに限る）
CDN キャッシュ
既に生成されている派生画像

があるかどうかを上から順に確認して、ある場合はそれを返します。

違うURLで同じ変換画像

仕組みを理解するため、違うURLで同じ変換画像の動きを考えてみます。
例えば、以下は画像 “DSC04470” に t_watermark,w_200の変換を加えた同じ結果ですが、バージョン項目の数字が違います。

https://res.cloudinary.com/CLOUD-NAME/t_watermark,w_200/v1568222352/travel/img/DSC04470
https://res.cloudinary.com/CLOUD-NAME/t_watermark,w_200/v1568346543/travel/img/DSC04470

これらに続けてアクセスしても、URLが異なるためキャッシュにはヒットしません。
ですが、Cloudinary側ではアセット&変換パスを参照するため、2つ目ではすでに生成された派生画像が返却されます。

本来、この形式のバージョン項目の数字はアセットに変更を加えた場合に変わるもので、アセットへの変更時に派生画像は削除されます。また他にもCNAMEとデフォルトドメインなど、違うURLでアクセスする方法はありますが、いずれも通常のユースケースでは違うURLで派生画像が残っているということはありません。

一方で、w_200,t_watermarkのように同じ変換でも変換順序を変えた場合、Cloudinaryでは異なる変換とみなされ、別々の派生画像が生成されます。

↓派生画像の一覧

それぞれの特徴

派生画像とキャッシュのそれぞれの特徴をまとめてみました。

特徴	派生画像	CDN キャッシュ
生成タイミング	・特定アセット&変換への初回アクセス時・Eager transformationの事前生成時	・特定URLへの初回アクセス時
削除タイミング	・コンソールでのアセット更新・削除時・APIでのアセット操作でオプション指定時・コンソール・APIで特定の派生画像の削除・再生成時（※ 時間経過による自動削除はない）	・コンソールでのアセット変更・削除時・APIでのアセット操作でオプション指定時・キャッシュ保持期間にもとづきアクセスがなければ無効化
削除時の挙動	紐づく派生画像の数によるが、Cloudinaryサーバでただちに実行される	それまでのアクセス状況（CDNでのキャッシュ保持の状況）により、CDN間の伝搬に数分から最大1時間かかる
生成状況の確認	コンソール・APIともに可能	不可（実際アクセスしてHitするかどうか）
事前生成	アップロード時のプリセット設定や explicit メソッドで可能 (eager transformation)	不可

派生画像の有無を確認するには

特定画像に紐づく変換

ある画像に対して、すでに派生画像があるかどうかはコンソール・APIともに確認できます。
コンソールの場合は2つ方法がありますが、現時点ではいずれも直近で生成された結果のみ表示できるようです。

方法1
手っ取り早く確認できるのは Media Explorer で、対象のアセットをダブルクリックで開いたら、「Optimize and Deliver」タブをクリックすると、下部に最大10件の派生画像が確認できます。（存在しない場合はセクションごと表示がありません）

方法2
Media Library からは階層が深いですが、最大30件の一覧確認と削除も可能です。
アセットを開いたら「Analysis」メニュー（以下キャプチャの画面中央にある）を選択し、「Define area of interest」をクリックします。（※ ウィンドウ幅が狭いと表示されない場合がありました。）

次の画面で「View derived assets」というオプションをクリックすると、派生アセットの一覧が表示されます。

注意：派生画像に named transformation があり、もしその変換定義を変更した場合、すでに古い定義で変換生成された派生画像はそのまま維持され更新されることはありませんが、現時点ではこの一覧内の変換の定義には変更後のものが表示されてしまいます。実際には、明示的に派生画像を削除/再生成しない限り、派生画像には変更が反映されません。（この画面は旧コンソールのデザインのままなので、恐らく今後変わる可能性があります。）

すべての情報を取得するには、Admin API の resource メソッドまたは resource_by_asset_id メソッドを使います。

public_id = 'ito-test/Sample03'
res = cloudinary.api.resource(public_id, max_results=500)
dvs = res['derived']
while res.get("derived_next_cursor"):  # 500件以上ある場合の処理
    res = cloudinary.api.resource(id, max_results=500, derived_next_cursor=res['derived_next_cursor'])
    dvs += res['derived']

for d in dvs[:3]:
    print(d["transformation"], d["id"])

print(f"{len(dvs)} derived assets")

# 出力結果（紐づく変換と派生画像ID）：
# fl_progressive:steep/ 153cd84686f412ef061274184c42b3d7
# l_ito-test:mesoko,w_500,c_fill,ar_1:1/w_1.1,r_max,fl_region_relative/g_faces,fl_layer_apply # e89a165425bbec75b4b29afe4c52cf51
# c_fill,w_800,h_800/l_ito-test:mesoko,w_400,h_400,c_thumb,g_auto/b_ivory,w_1.5,c_lpad,fl_region_relative/r_max,bo_1px_solid_gray/g_faces,fl_layer_apply c34bb537e7a52d6d2269847b9d4edfbf
# 54 derived assets

特定変換を使う派生画像

コンソールでは、現時点では Transformation Log から環境全体で使われた変換の履歴を見ることはできますが、残念ながら各変換がどの画像に使われているか、どの派生画像があるかを見ることはできません。

Admin API の transformation メソッドを使えば、特定の変換に対して使われている派生画像・動画を確認することができます。

trn_name = "t_cm_wm_colors"
res = cloudinary.api.transformation(trn_name, max_results=500)
dvs = res['derived']
while res.get("next_cursor"):  # 500件以上ある場合の処理
    res = cloudinary.api.transformation(trn_name, max_results=500, next_cursor=res['next_cursor'])
    dvs += res['derived']

# [{'bytes': 68971,
#   'format': 'jpg',
#   'id': '7b11e699fbb0a291d052646969bbe001',
#   'public_id': 'ito-test/travel/img4',
#   'resource_type': 'image',
#   'secure_url': 'https://res.cloudinary.com/CLOUD-NAME/image/upload/t_cm_wm_colors/v1626788147/ito-test/travel/img4.jpg',
#   'type': 'upload',
#   'url': 'http://res.cloudinary.com/CLOUD-NAME/image/upload/t_cm_wm_colors/v1626788147/ito-test/travel/img4.jpg'}]

本メソッドはパラメータで指定した変換そのものの派生アセットのみを取得します。指定した変換を含む変換（「t_cm_wm_colors,q_auto,f_auto」など）の派生アセットも調べるには、こちらのブログを参考にしてみてください。

以上、今回は Cloudinary における派生画像とキャッシュについての情報を整理してみました。この情報がお役に立てると幸いです！

クラスメソッドはCloudinaryのパートナーとして導入のお手伝いをさせていただいています。お気軽にこちらからお問い合わせください。こちらから無料でもサインアップいただけます。